<template>
  <span
      :class="{hide: item.deleted,active: selected === index}"
      class="tabTit">
      <span class="fileName"
            v-show="!editableTit"
            @click="changeTab(index)"
            @dblclick="showEditTit">{{item.filename}}</span>
      <span class="nameWidth" ref="widthName">{{item.filename}}</span>
      <input
        v-show="editableTit"
        @change="onNameChanged"
        @keyup="changeWidth"
        class="inputHover"
        v-model="item.filename"
        ref="inputWidth"
        type="text"/>
      <i class="el-icon-delete" v-show="deleteVisible" @click="deleteFiles(index)"></i>
    </span>
</template>
<script>
  import bus from "@/bus";

  export default {
    name: "TabTit",
    props: ["item", "index", "selected","deleteVisible","repeatable"],
    data(){
      return {
        isHnputHover:false,
        note:"",
        editableTit:false
      }
    },
    computed:{
      deletable(){
        return this.item.deleted && this.item.filename === ""
      },
      editable(){
        return this.item.oldname !== this.item.filename
      },
      addable(){
        return this.item.oldname === ""
      }
    },
    watch:{
      repeatable(){
        if(this.repeatable){
          this.$message.error('文件名字不能重复');
        }
      }
    },
    mounted(){
      bus.$on("showEditName",()=>{
        this.editableTit = false;
      });
    },
    methods: {
      showEditTit(){
        this.editableTit = true;
        this.changeWidth();
      },
      deleteFiles(index){
        this.$set(this.item, "deleted", true);
        this.$set(this.item,"filename","");
        bus.$emit("onDeleteFiles",index);
      },
      changeTab(index){
        this.$emit("onchangeTab",index);
      },
      onNameChanged(){
        this.editableTit = false;
        this.$set(this.item, "editable", true);
        bus.$emit("onNameChangedHandle",{
          deletable:this.deletable,
          editable:this.editable,
        });
//        filename是否重复
        bus.$emit("repeatFilename",this.item.filename);
      },
      changeWidth(){
        this.$refs.inputWidth.style.width = this.$refs.widthName.clientWidth+20+"px";
        console.log(this.$refs.widthName.clientWidth);
      }
    }
  }
</script>
<style scoped>
  .fileName{
    padding: 0 10px;
  }
  .nameWidth{
    position: absolute;
    right:1000000px;
    white-space: nowrap;
  }
  .tabTit{
    position: relative;
    margin-right: 10px;
    height: 24px;
    line-height: 24px;
    padding: 0 20px 0 10px;
  }
  .active{
    background-color: #fff;
    border-radius: 4px 4px 0 0;
  }
  .active input
  {
    background-color: #fff;
  }
  .active .inputHover{
    border:1px solid #ddd;
    padding: 0 10px;
  }
  input {
    background-color: #f5f5f5;
    border:none;
    border-radius:4px;
    height: 18px;
    line-height: 18px;
    outline: none;
    margin: 2px 10px 5px 0;
    position: relative;
  }
  .el-icon-delete {
    position: absolute;
    top: 7px;
    right: 10px;
    font-size: 12px;
    cursor: pointer;
  }
</style>
